<template>
  <a-card title="意见信息" :bodyStyle="{paddingTop:'0px'}">
      <a-list item-layout="vertical" >
        <a-list-item></a-list-item>
        <a-list-item>
          <div style="margin-bottom:10px;">
            <label>处理意见：</label>
            <a-radio-group v-model="approvalData.flag">
              <a-radio :value="0">同意</a-radio>
              <a-radio :value="1">不同意</a-radio>
              <a-radio :value="2">驳回</a-radio>
            </a-radio-group>
          </div>
        </a-list-item>
        <a-list-item>
            <label>备注：</label>
            <a-select placeholder="常用审批语" style="width: 300px;" @change="optionChange">
              <template v-for="(option,index) in HandlingOpinions">
                <a-select-option :key="index" :value="option">{{option}}</a-select-option>
              </template>
            </a-select>
            <a-input type="textarea" style="margin-top:20px;" :rows="3" v-model="approvalData.reason"/>
        </a-list-item>
        <a-list-item>
          <a-upload
            name="file"
            :multiple="true"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          >
            <a-button> <a-icon type="upload" /> 添加文件 </a-button>
          </a-upload>
        </a-list-item>
        <a-list-item>
          <a-checkbox v-model="isAppointnextUser">
            指定下一步操作人（指定下一步会签人员）
          </a-checkbox>
          <a-checkbox v-model="iscc">
            是否抄送
          </a-checkbox>
        </a-list-item>
        <a-list-item v-if="isAppointnextUser" style="line-height: 32px;">
          <label>指定下一步操作人（指定下一步会签人员）：</label>
          <j-select-user-by-dep v-model="approvalData.nextUserName"  style="width:300px;display: inline-block;"></j-select-user-by-dep>
          <a-button type="primary" icon="reload" style="margin-left:20px;" @click="reset('nextUserName')">清空</a-button>
          <span>（如果不指定则按照系统默认）</span>
        </a-list-item>
        <a-list-item v-if="iscc" style="line-height: 32px;">
          <label>抄送给：</label>
          <j-select-multi-user v-model="approvalData.ccUserRealNames" @change="ccUserChange" style="width:500px;"></j-select-multi-user>
        </a-list-item>
      </a-list>
  </a-card>
</template>

<script>
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
export default {
  name: 'taskStep',
  components: {
    JSelectMultiUser
  },
  data() {
    return {
      HandlingOpinions: [
        '同意',
        '同意***意见',
        '请指示',
        '同意***阅示',
        '请处理',
        '不同意',
        '呈领导阅示',
        '请审批'
      ],
      approvalData: {
        flag: 0,
        reason: '',
        ccUserIds: '', // 抄送人id
        ccUserRealNames: '' // 抄送人姓名
        // nextUserId: '', // 下一步操作人id
        // nextUserName: '', // 下一步操作人姓名
      },
      isAppointnextUser: false, // 是否指定下一步操作人
      iscc: false // 是否抄送
    }
  },
  methods: {
    optionChange(value, option) {
      this.approvalData['reason'] = value
    },
    ccUserChange(userIds) {
      this.approvalData.ccUserIds = userIds
    }
  }
}
</script>
